<template>
	<view class="share-content">
		<!-- tab -->
		<view class="tab-wrap">
			<zb-tab
			  :activeStyle="{fontWeight: 'bold',transform: 'scale(1.1)'}"
			  :data="list0"
			  v-model="active"
			  @change="tabChange"
			  lineColor="#5ca45b"
			  :scrollable="true"
			 ></zb-tab>
		</view>
		
		<!-- 列表 -->
		<view class="wrap">
			<ListItem v-for="item in list" :key="item.id" :itemData="item"></ListItem>
		</view>
		<!-- 功能小球 -->
		<view class="add-btn" @click="toAddGoods" >
			寄售
		</view>
	</view>
</template>

<script>
	import ListItem from "../share/components/list-item.vue"
	import { getSellListApi } from "@/http/goods.js"
	
	export default {
		name: "share",
		data() {
			return {
				list: [],
				active:1,
				sellQuery:{
				  page:0,
				  pageSize:10,
				  status:0,
				  uid:null
				},
				list0:[{
				    name: '售卖中',
				    value: 1,
				}, {
				    name: '已售罄',
				    value: 2,
				},{
				    name: '已下架',
				    value: 0,
				}]
			}
		},
		components: {
			ListItem
		},
		onLoad() {
		  this.getSellList();	
		},
		methods: {
			// 获取商品售卖列表
			async getSellList(){
				const res = await getSellListApi(this.sellQuery);	
				if(res){
					this.list = res.records;
				}
				
			},
			
			// tab改变
			tabChange(e){
				this.sellQuery.status = e.value;
				this.getSellList();
			},
			
			//
			toAddGoods(){
				uni.navigateTo({
					url:"/pages/share/addGoods"
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.share-content {
		background-color: #fbf9ec;
		min-height: calc( 100vh - var(--status-bar-height) );
		
		.tab-wrap{
			position: fixed;
			width: 100%;
			z-index: 1000;
			// padding-bottom: 2;
		}
		
		.wrap{
			padding: 0 15rpx;
			padding-top: 100rpx;
		}
		
		.add-btn{
			position: fixed;
			right: 8vw;
			bottom: 5vh;
			width: 100rpx;
			height: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 36rpx;
			color: #fbf9ec;
			background-color: #5ca45b;
			border-radius: 50rpx;
		}
	}
</style>